<template>
  <div :class="[bem()]">
    <div :class="[bem('body')]">
      <a-row :class="bem('body','inner')">
        <a-col :span="10" :class="bem('body-left')">
          <img src="https://www.spic-coalcg.com/bidweb/img/login.283b2bb0.png" alt="">
          <div :class="bem('body-left-content')">
            <div class="m-b-10">没有账号?</div>
            <a-button type="primary" @click="go('register')">供应方/采购方注册</a-button>
          </div>
        </a-col>
        <a-col :span="14" :class="bem('body-right')">
          <div :class="bem('body-right-form','inner')">
            <a-form
                :model="formState"
                name="normal_login"
                class="login-form"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
            >
              <a-form-item>
                <div :class="bem('body-right-form-title')">会员登录</div>
              </a-form-item>

              <a-form-item
                  name="username"
                  :rules="[{ required: true, message: '请输入您的用户名!' }]"
              >
                <a-input v-model:value="formState.username" placeholder="请输入用户名">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon"/>
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item
                  name="password"
                  :rules="[{ required: true, message: '请输入你的密码!' }]"
              >
                <a-input-password v-model:value="formState.password" placeholder="请输入密码">
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon"/>
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item
                  name="code"
                  :rules="[{ required: true, message: '不能为空' },{len:4,message: '图片验证码必须是4位'}]"
              >
                <a-input style="width: 180px;" v-model:value="formState.code" placeholder="请输入图片验证码">
                </a-input>
                <img @click="changeCode" ref="codeRef" class="verify-code" :src="codeUrl"/>
              </a-form-item>

              <a-form-item>
                <a-form-item name="remember" no-style>
                  <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                </a-form-item>
                <a :class="bem('body-right-form-forgot')" href="">忘记密码</a>
              </a-form-item>

              <a-form-item>
                <a-button :loading="formState.disabled" type="primary" html-type="submit"
                          :class="bem('body-right-form-btn')">
                  登录
                </a-button>
              </a-form-item>
            </a-form>
          </div>
          <div :class="bem('body-right-back')">
            <router-link to="/">
              <rollback-outlined/>
              返回首页
            </router-link>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {UserOutlined, LockOutlined, RollbackOutlined} from '@ant-design/icons-vue'
import {createBEM} from "/@/utils/bem";
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {FormState} from "/@/views/login/index";
import {useGlobSetting} from "/@/config";
import {checkCode} from "/@/api/sys/user";
import {useGo} from "/@/hooks/web/usePage";
import {useUserStore} from "/@/store/modules/user";
import {notification} from "ant-design-vue";
import {createSocket} from "/@/utils/webSocket";
import {SocketEnum} from "/@/enums/SocketEnum";
import {AMessage, DealMessage} from "/@/views/portal/bid";
import {events} from "/@/utils/bus";

const [bem] = createBEM('login')
const go = useGo()
const formState = reactive<FormState>({
  username: '',
  password: '',
  code: '',
  remember: true,
  disabled: false
});

//验证码相关
const {urlPrefix, apiUrl} = useGlobSetting();
const codeUrl = apiUrl + urlPrefix + '/verify-code'
const codeRef = ref<any>(null);

function changeCode() {
  codeRef.value.src = codeUrl + "?" + Math.random();
}

const userStore = useUserStore();


const onFinish = (values: any) => {
  formState.disabled = true;
  userStore.login({password: formState.password, username: formState.username, code: formState.code}).then(res => {
      if (res){
          notification.success({
            message: '登录成功',
            description: `欢迎您: ${res.realName}`,
            duration: 3,
          });
      }
  }).catch(() => changeCode()).finally(() =>formState.disabled = false);
  console.log('Success:', values);

};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};




</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';


.bg-blur {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(9px);
  -moz-filter: blur(9px);
  -o-filter: blur(9px);
  -ms-filter: blur(9px);
  filter: blur(9px);

}

.@{prefix-cls} {
  position: relative;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://img2.baidu.com/it/u=3274290663,2199925249&fm=253&fmt=auto&app=138&f=JPEG?w=995&h=495);

  &__body {
    z-index: 999 !important;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 950px;
    height: 550px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    overflow: hidden;

    &--inner {
      width: 100%;
      height: 100%;
    }

    &-left {
      width: 100%;
      height: 100%;
      position: relative;

      &-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        div {
          color: #fff;
          font-size: 1.5rem;
        }
      }
    }

    &-right {
      &--inner {
        position: relative;
      }

      &-form {
        &--inner {
          width: 400px;
          height: 500px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        &-title {
          width: 100%;
          height: 50px;
          text-align: center;
          font-weight: bold;
          font-size: 1.4rem;
          border-bottom: 5px solid @theme-color;
          color: @theme-color;
        }

        &-btn {
          width: 100%;
          height: 50px;
        }

        &-forgot {
          float: right;
          color: @theme-color !important;
        }
      }

      &-back {
        a {
          color: @theme-color !important;
        }

        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
      }

    }

  }
}


</style>
